<template>
    <section>
    	<div class="modify-pas wrapper">
    		<div class="header">修改密码</div>
            <div class="form">
                <el-form :label-position="labelPosition" ref="changePass" :rules="passRules" label-width="100px" :model="changePass">
                  <el-form-item label="旧密码：" prop='oldPass'>
                    <el-input v-on:change="onchange"  style='width: 200px;' size='small' v-model="changePass.oldPass"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码：" prop='newPass'>
                    <el-input v-on:change="onchange" type="password" style='width: 200px;' size='small' v-model="changePass.newPass"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码：" prop='checkPass'>
                    <el-input v-on:change="onchange" type="password" style='width: 200px;' size='small' v-model="changePass.checkPass"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button style='margin-left: 70px;' type="primary" @click="onSubmit('changePass')" :disabled='disabled'>确定</el-button>
                  </el-form-item>
                </el-form>
            </div> 
    	</div>
    </section>
</template>

<script>
    import Vue from 'vue'
    import { getCookie } from '~/utils/auth'
    import { mapGetters,mapActions} from 'vuex';
    import axios from '~/plugins/axios';
    import { Form, Input, FormItem, Button,Message} from 'element-ui'
    Vue.use(Form)
    Vue.use(Input)
    Vue.use(FormItem)
    Vue.use(Button)

	Vue.prototype.$message = Message;
	
    export default {
        head(){
            return {
                title: "CRM-修改密码"
            }
        },
        data() {
        	var validateOldPass = (rule, value, callback) => {
                if (value === '') {
                  	callback(new Error('请输入密码'));
                }else if(value.length<6 ||value.length>20){
                  	callback(new Error('密码长度在6到20位之间'));
                }else{
                	callback();
                }
            };
            var validateNewPass = (rule, value, callback) => {
                if (value === '') {
                  	callback(new Error('请输入密码'));
                } else if(value==123456){
                	callback(new Error('新密码不能为初始密码'));
                }else if(value !== '' && value.length<6 ||value.length>20){
                  	callback(new Error('密码长度在6到20位之间'));
                }else{
                	callback();
                }
            };
            var validateCheckPass = (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('请再次输入密码'));
                } else if (value !== this.changePass.newPass) {
                  callback(new Error('两次输入密码不一致!'));
                } else {
                  callback();
                }
             };
            return {
                tabName: '修改密码',
                name: '',
                labelPosition: 'right',
                disabled: false,
                changePass: {
                  oldPass: '',
                  newPass: '',
                  checkPass: ''
                },
                passRules: {
                	oldPass: [
	                    { validator: validateOldPass, trigger: 'blur' }
	                  ],
	                  newPass: [
	                    { validator: validateNewPass, trigger: 'blur' }
	                  ],
	                  checkPass: [
	                     { validator: validateCheckPass, trigger: 'blur' }
	                  ]
                },
                
            };
        },
        methods: {
        	
        	onchange(){
        		this.disabled=false
        	},
        	
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                 if (valid) {
	                 this.$store.dispatch('changePasswd',{"oldPasswd":this.changePass.oldPass,"newPasswd1":this.changePass.checkPass,"newPasswd2":this.changePass.newPass})
						.then((response) => {
							if(!response){return}
							let result=response.data.code
							if (result==0) {
								this.$message({
							          message: '恭喜！修改成功，请牢记新的登录密码',
							          type: 'success'
						        });
						        this.$refs[formName].resetFields();
						        this.disabled=true
							}else{
								this.$message.error({
							          message: '输入的旧密码不正确'
						        });
					            this.$refs[formName].resetFields();
							}
							
					})
                 }
               });
            },
        },
        computed : {
            ...mapGetters({
                'userData' : 'getUserData',
                'pageTabsList': 'getPageTabsList'
            })
        },
        created() {
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        }
    }
</script>

<style lang="scss">
    .modify-pas {
        width: 650px;
        height: 400px;
        border: 1px solid #dfe6ec;
        position: relative;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
        font-weight: 700;
        font-style: normal;
        .header {
            border-width: 0px;
            position: absolute;
            left: 2px;
            top: 9px;
            width: 117px;
            height: 35px;
            font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
            font-weight: 500;
            font-style: normal;
            font-size: 16px;
            text-align: left;
            margin-left: 10px;
        }
        .form {
            margin: 50px 0 0 80px;
        }
        
    }
</style>